import React, {Component} from 'react'
import styles from "./address.less"
import classNames from 'classnames'
import { connect } from 'dva'
import { GET_ADDRESS_LIST, DELETE_ADDRESS, DEFAULT_ADDRESS, ADD_ADDRESS, EDIT_ADDRESS } from "../../actions/address"
import { Button, Divider, Popconfirm, Modal } from  'antd'
import AddressSvg from '@/assets/address.svg'
import AddressForm from '@/components/addressForm/addressForm'

@connect(({ address }) => ({
  address
}))

class Address extends Component {
  constructor(props) {
    super(props);
    this.state = {
      visible: false,
      isEdit: false,
      detail: {}
    }
  }

  componentDidMount() {
    const {dispatch} = this.props
    dispatch(GET_ADDRESS_LIST())
  }

  handleCancel() {
    this.refs.AddressForm.resetForm()
    this.setState({
      visible: false,
      detail: {}
    })
  }

  newAddressBtn() {
    this.setState({
      isEdit: false
    }, () => {
      this.setState({
        visible: true
      })
    })
  }

  onFinish(data, id) {
    const { isEdit } = this.state
    const { dispatch } = this.props
    const { province, city, area, mobile, address, addressee } = data
    if (isEdit) {
      dispatch(EDIT_ADDRESS({
        addressee,
        mobile,
        address: `${province} ${city} ${area} ${address}`,
        id
      }))
    } else {
      dispatch(ADD_ADDRESS({
        addressee,
        mobile,
        address: `${province} ${city} ${area} ${address}`
      }))
    }
    this.setState({
      visible: false
    })
  }

  deleteAddress(id) {
    const {dispatch} = this.props
    dispatch(DELETE_ADDRESS(id))
  }

  setDefaultAddress(id) {
    const {dispatch} = this.props
    dispatch(DEFAULT_ADDRESS(id))
  }

  edit(e, detail) {
    e.stopPropagation()
    this.setState({
      isEdit: true
    }, () => {
      this.setState({
        visible: true,
        detail
      })
    })
  }

  render() {
    const {address: { addressList }, title, noPaddingBottom} = this.props
    const { visible, isEdit, detail } = this.state
    return (
      <div className={styles.addressContainer} style={{ paddingBottom: noPaddingBottom ? 0: 146}}>
        <div className={styles.orderTitle}>{title ? title: '收获地址'}</div>
        <div className={styles.addressListContainer}>
          {
            addressList.map(item => {
             return (
               <div className={styles.addressList} key={item.id} onClick={this.setDefaultAddress.bind(this, item.id)}>
                 <img src={AddressSvg} className={styles.icon}/>
                 <span className={styles.name}>{item.addressee}</span>
                 <span className={styles.receiver}>收</span>
                 <span className={styles.mobile}>{item.mobile}</span>
                 <span className={styles.address}>{item.address}</span>
                 <span className={!item.isDefault ? classNames(styles.defaultAddressIcon, styles.visibleAddress): styles.defaultAddressIcon}>
                   <span>默认地址</span>
                 </span>
                 <div className={styles.action}>
                   <Button type={'link'} onClick={e => this.edit.call(this, e, item)}>修改</Button>
                   <Divider type={'vertical'}/>
                   <Button type={'link'} onClick={e => e.stopPropagation()}>
                     <Popconfirm
                       title="确定删除该地址吗?"
                       onConfirm={this.deleteAddress.bind(this, item.id)}
                       okText="是"
                       cancelText="否"
                     >
                       删除
                     </Popconfirm>
                   </Button>
                 </div>
               </div>
             )
            })
          }
          <Button className={styles.newAddressBtn} onClick={this.newAddressBtn.bind(this)}>新建地址</Button>
          <Modal
            closable={true}
            width='620px'
            footer={null}
            onCancel={this.handleCancel.bind(this)}
            visible={visible}
            destroyOnClose
          >
            <div className={'modalTitle'}>{isEdit ? '编辑地址' : '新建地址'}</div>
            <AddressForm ref="AddressForm" onFinish={this.onFinish.bind(this)} isEdit={isEdit} detail={detail}/>
          </Modal>
        </div>
      </div>
    );
  }
}

export default Address